<template>
	<view class="content">
		<view class="home-top">
			<view class="home-title">空压机</view>
			<view class="home-name">郑州航海东路喷油螺杆压缩机</view>
			<view class="home-title" style="margin-top: 42rpx;">货物名称</view>
			<view class="home-tag">
				<view class="tag-item" :class="tagType===item.type?'tabActive':''" v-for="(item,index) in tagList"
					:key="index" @click="changeTag(item)">{{item.name}}</view>
			</view>
			<view class="home-title" style="margin-top: 42rpx;">货物载重(顿)</view>
			<view class="home-input">
				<u--input type="digit" placeholder="请输入货物载重" border="none" v-model="goodsWeight"></u--input>
			</view>
			<view class="home-title" style="margin-top: 42rpx;">车牌号码</view>
			<view class="home-input" @click="showCar=true">
				<view v-if="carvalue">{{carvalue}}</view>
				<view v-else style="color: #c0c4cc">请输入车牌号</view>
			</view>
			<view style="margin-top: 31rpx;">
				<view class="home-title flex-row">请选预计使用时长<text
						style="color: #333;font-size: 27rpx;">(计费方式：2元/分钟)</text>
				</view>
				<view class="home-tag">
					<view class="tag-item time-item" :class="timeVal===item.val?'timeActive':''"
						v-for="(item,index) in timeList" :key="index" @click="changeTime(item)">{{item.name}}</view>
				</view>
				<view style="margin-top: 15rpx;margin-left: -18px;margin-right: -18px;" v-if="timeVal==70">
					<u-slider v-model="timeSlider" min="0" max="120" block-width="40" active-color="#d90000"
						block-color="#d60000" showValue></u-slider>
				</view>
			</view>
		</view>
		<!-- <view class="home-top" style="padding: 31rpx 0;margin-top: 31rpx;">
			<view style="padding: 0 31rpx;width: 100%;padding-bottom: 31rpx;">
				<view class="home-title flex-row">请选预计使用时长<text
						style="color: #333;font-size: 27rpx;">(计费方式：2元/分钟)</text>
				</view>
				<view class="home-tag">
					<view class="tag-item time-item" :class="timeVal===item.val?'timeActive':''"
						v-for="(item,index) in timeList" :key="index" @click="changeTime(item)">{{item.name}}</view>
				</view>
				<view style="margin-top: 15rpx;margin-left: -18px;margin-right: -18px;" v-if="timeVal==70">
					<u-slider v-model="timeSlider" min="0" max="120" block-width="40" active-color="#d90000"
						block-color="#d60000" showValue></u-slider>
				</view>
			</view>
			<u-line color="#e3e3e3"></u-line>
			<view style="padding: 31rpx;width: 100%;display: flex;align-items: center;" @click="selectVal=1">
				<view class="">到时间5分钟提醒</view>
				<view class="circle-s" v-if="selectVal==1">√</view>
				<view v-else class="circle"></view>
			</view>
			<u-line color="#e3e3e3"></u-line>
			<view style="padding: 31rpx;width: 100%;display: flex;align-items: center;" @click="selectVal=2">
				<view class="">到时间10分钟提醒</view>
				<view class="circle-s" v-if="selectVal==2">√</view>
				<view v-else class="circle"></view>

			</view>
			<u-line color="#e3e3e3"></u-line>
			<view style="padding: 0 31rpx;width: 100%;padding-bottom: 31rpx;margin-top: 42rpx;">
				<view class="home-title">提醒手机</view>
				<view class="home-input">
					<u--input type="number" placeholder="请输入手机号" border="none" v-model="phone"></u--input>
				</view>

			</view>
		</view> -->
		<view class="home-bom">
			<view>预计使用费用：￥{{totalPrice}}</view>
			<view class="bon-but" @click="goPay">支付费用</view>
		</view>
		<u-keyboard mode="car" @change="valChange" autoChange :safeAreaInsetBottom="false" @backspace="backspace"
			:show="showCar" @confirm="showCar=false" @cancel="showCar=false"></u-keyboard>
	</view>
</template>

<script>
	import {
		postCartAdd
	} from "@/api"
	export default {
		data() {
			return {
				selectVal: 1,
				showCar: false,
				carvalue: '',
				value: '',
				tagType: 1,
				deviceNo: "",
				goodsName: '水泥',
				goodsWeight: '',
				phone: "",
				tagList: [{
						name: '水泥',
						type: 1,
					},
					{
						name: '矿粉',
						type: 2,
					},
					{
						name: '煤炭',
						type: 3,
					}
				],
				timeSlider: 60,
				timeVal: 60,
				timeList: [{
						name: '30min',
						val: 30,
					},
					{
						name: '45min',
						val: 45,
					},
					{
						name: '60min',
						val: 60,
					},
					{
						name: '自定义',
						val: 70,
					}
				]
			}
		},
		onLoad(opt) {
			// #ifdef MP-ALIPAY
			let options = my.getLaunchOptionsSync();
			if (options.query) {
				this.deviceNo = options.query.x
				uni.setStorageSync('deviceNo', this.deviceNo)
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (opt.scene) {
				this.deviceNo = opt.scene
				uni.setStorageSync('deviceNo', this.deviceNo)
			}
			// #endif
		},
		computed: {
			totalPrice() {

				if (this.timeVal == 70) {
					return (2 * this.timeSlider).toFixed(2)
				} else {
					return (2 * this.timeVal).toFixed(2)
				}
			},
		},
		methods: {
			async goPay() {
				console.log(12, this.goodsWeight);
				if (!this.deviceNo) {
					uni.$u.toast('请扫设备码')
					return
				}
				if (!this.goodsWeight) {
					uni.$u.toast('请输入货物载重')
					return
				}
				if (!this.carvalue) {
					uni.$u.toast('请输入车牌号')
					return
				}

				let time = ''
				if (this.timeVal == 70) {
					time = this.timeSlider
				} else {
					time = this.timeVal
				}

				// const res = await postCartAdd({
				// 	deviceId: 1,
				// 	goodsName: this.goodsName,
				// 	goodsWeight: this.goodsWeight,
				// 	time: time,
				// 	payType: "weChat",
				// 	carNo: this.carvalue,
				// })
				// wx.openEmbeddedMiniProgram({
				// 	appId: 'wxe48aedff31caaf2d',
				// 	path: "pages/index/index",
				// 	extraData: res.data.payInfo,
				// 	success(resa) {
				// 		console.log("成功回调返回的res：" + JSON.stringify(res))
				// 	},
				// 	fail(resa) {
				// 		console.log("失败回调返回的res：" + JSON.stringify(res))
				// 	},
				// })
				const item = {
					deviceNo: this.deviceNo,
					goodsName: this.goodsName,
					goodsWeight: this.goodsWeight,
					time: time,
					payType: "weChat",
					carNo: this.carvalue,
					totalPrice: this.totalPrice,
				}
				uni.navigateTo({
					url: '/pages/pay/pay?item=' + encodeURIComponent(JSON.stringify(item))
				})

			},
			changeTag(item) {
				this.tagType = item.type
				this.goodsName = item.name
			},
			changeTime(item) {
				this.timeVal = item.val
			},
			valChange(val) {
				this.carvalue += val;
			},
			backspace() {
				if (this.carvalue.length) {
					this.carvalue = this.carvalue.substr(0, this.carvalue.length - 1);
				}

			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 31rpx;
		font-size: 31rpx;
		color: #333;
		/* padding-bottom: 31rpx; */
		width: 100vw;
		overflow-x: hidden;
	}

	.home-bom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* margin-top: 31rpx; */
		width: 100vw;
		display: flex;
		align-items: center;
		padding-left: 31rpx;
		height: 125rpx;
		background: #FFFFFF;

	}

	.bon-but {
		background: #d60000;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		width: 280rpx;
		margin-left: auto;
		line-height: 125rpx;
		text-align: center;
	}

	.circle {
		width: 45rpx;
		height: 45rpx;
		border: 1px solid #ccc;
		border-radius: 50%;
		margin-left: auto;
	}

	.circle-s {
		width: 45rpx;
		height: 45rpx;
		background: #3c9cff;
		border: 1px solid #3c9cff;
		border-radius: 50%;
		margin-left: auto;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 26rpx;
	}



	.home-top {
		background: #FFFFFF;
		padding: 31rpx;
		width: 100vw;
		padding-bottom: 35rpx;
	}

	.home-title {
		color: #000;
		font-family: 600;
		font-size: 31rpx;
	}

	.home-name {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		background: #f0f0f0;
		padding: 0 31rpx;
		display: flex;
		align-items: center;
		margin-top: 15rpx;
	}

	.home-tag {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 21rpx;
	}

	.tag-item {
		width: 200rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.time-item {
		width: 150rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.timeActive {
		border: 1px solid #d60000;
		color: #d60000;
	}

	.tabActive {
		border: 1px solid #3c9cff;
		background: #3c9cff;
		color: #FFFFFF;
	}

	.home-input {
		width: 100%;
		margin-top: 21rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		padding: 0 31rpx;
		color: #303133;
		font-size: 15px;
	}
</style>